<template>
  <div class="container-wrap">
    <div class="search-bar" :style="{ paddingTop: searchTop }">
      <uni-easyinput
        prefixIcon="search"
        v-model="searchValue"
        :clearable="false"
        confirmType="search"
        placeholder="课程搜索"
        @confirm="goCourseCenter"
      ></uni-easyinput>
      <div class="icon iconfont icon-saoyisao" @click="scan"></div>
      <div class="search-bar-bg"></div>
    </div>
    <div class="content-wrap" :style="{ paddingTop: contentTop }">
      <div class="common-wrap" >
        <swiper class="my-swipe" autoplay :interval="3000" indicator-dots indicator-color="#ebedf0" indicator-active-color="white">
          <swiper-item v-for="(item, index) in bannerList" :key="index" @click="pageToHref(item.goId || item.goUrl, item.type)">
            <image  src="@/static/image/course-img.png" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </div>
      <div class="common-wrap mt10">
        <div class="common-notice common-shadow flex-wrap flex-middle">
          <i class="icon iconfont icon-laba1 notice-img"></i>
          <span class="fs-14 fc-000 flex-item">
            <swiper vertical class="notice-swipe" autoplay circular :interval="3000" :show-indicators="false">
              <swiper-item v-for="(item, index) in notice" :key="index" class="ellipsis" @click="pageToHref('/pages/notice/detail?id=' + item.id)">
                {{ item.title }}
              </swiper-item>
            </swiper>
          </span>
          <span class="fs-12 fc-666 select-icon" @click="toPage('/pages/home/notice')">查看更多</span>
        </div>
      </div>
      <div class="common-wrap">
        <div class="menu-wrap">
          <div class="menu-swiper-item flex-wrap">
            <div class="menu-item" @click="toPath(item.resourceUrl)" v-for="(item, index) in menList" :key="index">
              <image :src="imgURL + item.menuIcon" />
              <div class="menu-text fs-13 fc-333 ellipsis">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="home-module">
        <homeModule v-for="(item, index) in homeConfig" :key="index" :type="item.type" :name="item.name" :config="item"></homeModule>
      </div>
    </div>
  </div>
</template>

<script>
import { decryptByDES, isEnvDev, parse, removeRichText, stringify, sum } from '@/assets/js/util'
import homeModule from '@/view/home/homeModule.vue'
import { SALT_DES_KEY } from '@/assets/js/constant'
import NCWD from '@/static/image/menuicon/NCWD.png'
import NOTICE from '@/static/image/menuicon/NOTICE.png'
import LECTURER from '@/static/image/menuicon/LECTURER.png'
import TEACHING_CENTER from '@/static/image/menuicon/TEACHING_CENTER.png'
import EXAM from '@/static/image/menuicon/EXAM.png'
import COURSE_CENTER from '@/static/image/menuicon/COURSE_CENTER.png'
import PRACTICE from '@/static/image/menuicon/PRACTICE.png'
import FACE_TEACHING from '@/static/image/menuicon/FACE_TEACHING.png'
import RANKING_LIST from '@/static/image/menuicon/RANKING_LIST.png'
import TRAINING_ITEM from '@/static/image/menuicon/TRAINING_ITEM.png'
import AUDIT_CENTER from '@/static/image/menuicon/AUDIT_CENTER.png'
import QUORA from '@/static/image/menuicon/QUORA.png'
import QUESTIONNAIRE from '@/static/image/menuicon/QUESTIONNAIRE.png'
import MY_MISTAKES from '@/static/image/menuicon/MY_MISTAKES.png'
import MY_TOPIC from '@/static/image/menuicon/MY_TOPIC.png'
import MY_INTEGRAL from '@/static/image/menuicon/MY_INTEGRAL.png'
// import SECOND_KNOWLEDG from '@/static/image/menuicon/SECOND_KNOWLEDG.png'
import POINT_SHOP from '@/static/image/menuicon/POINT_SHOP.png'
import STUDY_FINLAND from '@/static/image/menuicon/STUDY_FINLAND.png'
import MY_LIVE_STREAMING from '@/static/image/menuicon/MY_LIVE_STREAMING.png'
import SECOND_KNOWLEDGE from '@/static/image/menuicon/SECOND_KNOWLEDGE.png'
import SECOND_NEWS_INFORMATION from '@/static/image/menuicon/SECOND_NEWS_INFORMATION.png'
import DAILY_PRACTICE from '@/static/image/menuicon/DAILY_PRACTICE.png'
import VIDEOCONFERENCING from '@/static/image/menuicon/VIDEOCONFERENCING.png'
import LIVE_CLASS from '@/static/image/menuicon/LIVE_CLASS.png'
import MY_MEDAL from '@/static/image/menuicon/MY_MEDAL.png'
import banner from "@/mock/index/banner.json"
import announcement from "@/mock/index/announcement.json"
import mockMenu from "@/mock/index/menu.json"
import mockConfig from "@/mock/index/config.json"
export default {
  name: 'index',
  data() {
    return {
      imgURL: 'https://www.qixuexing.com/hklearn',
      menuList: [],
      searchValue: '',
      bannerList: [],
      homeConfig: [],
      coursePage: {
        pageNumber: 1,
        pageSize: 6,
      },
      hotLoading: false,
      recentLoading: false,
      recoLoading: false,
      licenseStatus: true,
      notice: null,
      unReadMessageCount: 0,
      isShowText: false,
      showOverlay: false,
      platNotice: {},
	  menList:[],
      menuIconList: {
        NCWD,
        NOTICE,
        LECTURER,
        TEACHING_CENTER,
        EXAM,
        COURSE_CENTER,
        PRACTICE,
        FACE_TEACHING,
        RANKING_LIST,
        TRAINING_ITEM,
        AUDIT_CENTER,
        QUORA,
        QUESTIONNAIRE,
        MY_MISTAKES,
        MY_TOPIC,
        MY_INTEGRAL,
        POINT_SHOP,
        STUDY_FINLAND,
        MY_LIVE_STREAMING,
        SECOND_KNOWLEDGE,
        SECOND_NEWS_INFORMATION,
        DAILY_PRACTICE,
        VIDEOCONFERENCING,
        LIVE_CLASS,
        MY_MEDAL,
      },
    }
  },
  components: {
    homeModule,
  },
  computed: {
    searchTop() {
      return 16 + uni.getSystemInfoSync().statusBarHeight + 'px'
    },
    contentTop() {
      return 72 + uni.getSystemInfoSync().statusBarHeight + 'px'
    },
  },
  mounted() {
      this.initPage()
  },
  onHide() {
    this.searchValue = ''
  },
  onShow() {
    getApp().globalData.searchValue = ''
  },
  methods: {
    removeRichText,
    getMenuIcon(item) {
      return this.menuIconList[item.menuCode] ? this.menuIconList[item.menuCode] : ''
    },
    handleChange(type) {
      this.$api.site
        .infoBySiteType({
          siteType: type,
        })
        .then((res) => {
          let result = JSON.parse(decryptByDES(res, SALT_DES_KEY))
          uni.setStorageSync(
            'loginSite',
            JSON.stringify({
              siteId: result.siteId,
              domainUrl: result.siteCode,
              siteType: result.siteType,
              isOpenUnitIndependentConfig: result.isOpenUnitIndependentConfig,
            }),
          )
          this.updateSiteInfo(result)
          if (result.siteType === 'D') {
            this.updateSiteId(result.siteId)
          } else if (result.siteType === 'S') {
            this.updateSiteId(result.rootSiteId)
          }
          // 如果是集团空间, 则用用户的siteId, 如果是单位空间, 则用登录的rootSiteId
          this.showOverlay = false
          this.isShowText = false
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        })
    },
    showToggle() {
      this.isShowText = !this.isShowText
      this.showOverlay = this.isShowText
    },
    // 查询平台公告列表
    /*  getPlatNoticeList () {
        this.$api.management.getPlatCenterNoticeList({ pageNumber: 1, pageSize: 1, siteId: this.siteId }).then((result) => {
          this.platNotice = result.list && result.list[0] || {}
          // this.currentNoticeId = result.list && result.list[0].id || ''
        }).catch((err) => { })
      },*/

    splitArr(list, len) {
      let arr = []
      let listLen = list.length
      for (let i = 0; i < listLen; i += len) {
        arr.push(list.slice(i, i + len))
      }
      return arr
    },
    toPage(url, query = null) {
      if (!url) {
        this.$toast.warning('暂不支持，敬请期待')
      } else {
        this.$uniPush(url)
      }
    },
    toPath(path) {
        this.$uniPush(path)
    },
    scan() {
      uni.scanCode({
        scanType: ['qrCode'],
        success: (res) => {
          let result = res.result
          if (result) {
              this.$toast.success('扫描成功')
          } else {
            this.$toast.warning('识别二维码错误')
          }
        },
      })
    },
    goCourseCenter() {
       this.$toast.warning('未搜索到相关课程')
    },
    licenseClose() {
      this.licenseStatus = false
    },
    initPage() {
      // 获取轮播图列表
      this.getBannerList()
      this.getNotice()
      this.getTopMenuList()
    },
    getNotice() {
	  // 公告
	  this.notice=announcement.data.list||[]
    },
    getTopMenuList() {
       this.menList=mockMenu.data.map((e) => {
          e.name = e.menuName
          e.resourceUrl = e.goTarget
          return e
        })
		this.homeConfig=mockConfig.data;
      // this.$api.site
      //   .siteHomeConfig({
      //     siteId: this.siteId,
      //     deviceType: 2,
      //   })
      //   .then((res) => {
      //     this.homeConfig = res
      //   })
    },
    //轮播图列表
    getBannerList() {
          this.bannerList = banner.data.list || []
    },
    requestUnreadCount() {
      this.$api.message
        .getMsgCount()
        .then((res) => {
          this.unReadMessageCount = sum(res.map((item) => Number(item.noReadCount)))
        })
        .catch((err) => {})
    },

    pageToHref(goUrl = '', type, isPlat = false) {
      let url = ''
      if (type && goUrl) {
        if (type == 1) {
          let prefix = goUrl.indexOf('http') == 0 ? '' : 'http://'
          this.$uniPush({
            name: 'webview-detail',
            params: {
              url: encodeURIComponent(prefix + goUrl),
            },
          })
        } else if (type === 'C') {
          let id = parse(goUrl).id
          url = `/pages/course/detail/${id}`
        } else if (type === 'N') {
          let id = parse(goUrl).id
          url = `/pages/notice/${id}`
        } else if (type === 'E') {
          let id = parse(goUrl).id
          url = `/pages/exam/start/${id}`
        } else if (type === 'P') {
          let id = parse(goUrl).id
          url = `/pages/practice/start/${id}`
        } else if (type === 'S') {
          let id = parse(goUrl).id
          url = `/pages/questionnaire/start/${id}`
        } else if (type === 'OT') {
          let id = parse(goUrl).id
          url = `/pages/offlineTrain/detail/${id}`
        } else if (type === 'L') {
          let id = parse(goUrl).id
          url = `/pages/live/detail/${id}`
        } else if (type === 'T') {
          let id = parse(goUrl).id
          url = `/pages/training/detail/${id}`
        } else if (type === 'NEWS') {
          let id = parse(goUrl).id
          url = `/pages/news/detail/${id}`
        } else {
          this.$toast.warning('暂不支持，敬请期待')
        }
        if (url) {
          this.$uniPush(url)
          // uni.navigateTo({
          // 	url: this.$coverHref()
          // })
        }
      } else if (goUrl) {
        this.$uniPush(goUrl)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@keyframes showText {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.container-wrap {
  .toggle-box {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 10;
    transition: 0.3s all ease-in-out;

    &.show {
      right: -2px;
      transition: 0.3s all ease-in-out;
    }

    .toggle-item {
      width: 50px;
      height: 50px;
      background: #ffffff;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 25px;
      border: 1px solid #eeeeee;
      text-align: center;
      transition: 0.3s all ease-in-out;

      &.show {
        width: 140px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;

        & .show-text {
          display: inline-block;
          animation: showText 0.3s ease-in-out;
        }
      }

      i {
        display: block;
        line-height: 50px;
      }

      .toggle-text {
        line-height: 50px;
        display: none;
      }
    }
  }

  .content-wrap {
    padding-top: 72px;
    position: relative;
    z-index: 1;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: -2;
      width: 100%;
      height: 196px;
      background: linear-gradient(180deg, var(--color) 0%, rgba(255, 255, 255, 0) 100%);
    }

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 196px;
      background: url(@/static/image/banner-bg.png) bottom center no-repeat;
      background-size: 100%;
    }

    .msg {
      :deep() {
        .van-notice-bar {
          color: var(--color);
          background-color: #fff;
          box-shadow: 0 2px 6px 0 rgba(219, 219, 219, 0.3);
          border-radius: 4px;
          height: 30px;
          margin-bottom: 5px;
        }
      }
    }
  }

  .search-bar {
    display: flex;
    position: fixed;
    width: 100%;
    z-index: 10;
    align-items: center;
    padding: 16px 15px 12px;
    overflow: hidden;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: calc(72px + var(--status-bar-height));
      z-index: -3;
      top: 0;
      left: 0;
      background: #fff;
    }

    .search-bar-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 196px;
      z-index: -2;
      background: linear-gradient(180deg, var(--color) 0%, rgba(255, 255, 255, 0) 100%);

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 196px;
        background: url(@/static/image/banner-bg.png) bottom center no-repeat;
        background-size: 100%;
      }
    }

    .icon-saoyisao {
      width: 18px;
      height: 18px;
      color: #fff;
      font-size: 16px;
      margin-left: 15px;
      margin-top: 2px;
    }

    .icon-msg {
      width: 18px;
      height: 18px;
      background-image: url('../static/image/icon_msg1.png');
      background-size: 100% 100%;
      margin-left: 15px;
      position: relative;

      i {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #df0000;
        right: -5px;
        top: -3px;
        border-radius: 50%;
      }
    }
  }
}

.menu-item {
  padding: 14px 0 0;
  text-align: center;
  flex: 0 0 25%;

  image {
    width: 12.5vw;
    height: 12.5vw;
  }

  .menu-text {
    max-width: calc((100vw - 40px) / 4);
    line-height: 18px;
    padding: 8px 0 14px;
  }
}

.title-wrap {
  height: 38px;
}

.my-swipe {
  height: 138px;

  image {
    height: 138px;
    width: 100%;
    border-radius: 4px;
  }
}

.common-shadow {
  height: 36px;
  padding: 10px;
  box-shadow: 0px 2px 6px 0px rgba(219, 219, 219, 0.3);
  border-radius: 4px;
  background: #fff;

  .license-img {
    width: 16px;
    height: 16px;
    margin-right: 7px;
  }

  .license-close {
    width: 16px;
    height: 16px;
  }

  .notice-img {
    width: 23px;
    height: 14px;
    color: var(--color);
  }

  .van-notice-bar {
    padding: 0 10px 0 5px;
    background: #fff;
    height: 36px;
  }

  .select-icon {
    height: 17px;
    border-left: 1px solid #666;
    padding-left: 7px;
    color: #666;

    &:after {
      border-left-color: #666;
      border-bottom-color: #666;
    }
  }
}

.more-msg {
  background-color: var(--colorbg1);
  color: var(--color);
  line-height: 0;
  padding: 7px 10px;

  .select-icon {
    padding-right: 12px;
    position: relative;
    display: inline-block;
    width: 100%;

    &::after {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      position: absolute;
      border-left: 1px solid #1ea69d;
      border-bottom: 1px solid #1ea69d;
      -webkit-transform: translate(0, -50%) rotate(-135deg);
      transform: translate(0, -50%) rotate(-135deg);
      top: 50%;
      right: 0;
    }
  }
}

.notice-swipe {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;

  swiper-item {
    font-size: 12px;
    color: #666;
    line-height: 20px;
  }
}

.menu-swipe {
  @media screen and (min-width: 440px) and (max-width: 465px) {
    height: 52vw;
  }

  @media screen and (min-width: 465px) and (max-width: 800px) {
    height: 50vw;
  }

  @media screen and (min-width: 800px) {
    height: 40vw;
  }

  height: 230px;

  .menu-swiper-item {
    padding-bottom: 30px;
  }
}

.menu-wrap {
  height: 200px;

  .menu-swiper-item {
    height: 200px;
  }
}

.menu-swiper-item {
  flex-wrap: wrap;
}

.uni-easyinput {
  :deep(.is-input-border) {
    border-radius: 16px;
    border: none;

    .uni-easyinput__content-input {
      height: 32px;
    }
  }
}
</style>
